<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Toucha</title>
    <link rel="stylesheet" href="lib/jquery.mobile.core/jquery.mobile.core.css" />
    <link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="lib/jquery.before.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/jquery.after.js"></script>
    <script src="lib/jquery.mobile.core/jquery.mobile.core.min.js"></script>
    <script src="lib/bootstrap/bootstrap.bundle.min.js"></script>
</head>
<body>
    <header class="toucha-header">
        <div class="toucha-title text-center mx-auto">Toucha</div>
    </header>

    <div class="ui-mobile-viewport toucha-page-container">
        <div data-role="page" id="toucha-homepage" data-toucha-title="Toucha">
            <div class="container">
                <div class="row justify-content-around">
                    <div class="col">
                        <div data-toucha-app-page="#page-app-demo" class="eye mx-auto toucha-app-icon">
                            <div class="eyelid-top"></div>
                            <div class="eyelid-bottom"></div>
                            <img src="img/default-app-icon.png" alt="App Name">
                            <p>App Name</p>
                        </div>
                    </div>
                    <div class="col">
                        <div data-toucha-app-page="#page-app-demo" class="eye mx-auto toucha-app-icon">
                            <div class="eyelid-top"></div>
                            <div class="eyelid-bottom"></div>
                            <img src="img/default-app-icon.png" alt="App Name">
                            <p>App Name</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Insert toucha embeded app pages here -->
        <div data-role="page" id="page-app-demo" data-toucha-title="App Name">
            <div class="jumbotron">
                <h1>Hello, Toucha!</h1>
                <p>Touch Application Template with jQuery Mobile paging and Bootstrap UI for Electron platform.</p>
                <p>
                    <a class="btn btn-primary btn-lg" href="https://gitee.com/OLADUS/toucha">Learn more</a>
                    <a class="btn" href="#toucha-homepage">Back to home</a>
                </p>
            </div>
        </div>
    </div>

    <footer class="toucha-footer text-center">
        Static footer
    </footer>

    <script src="index.js"></script>
</body>
</html>